<%--
  Created by IntelliJ IDEA.
  User: rizwan
  Date: 2017/12/12
  Time: 8:19
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>收货单据-应用中心</title>
    <link rel="stylesheet" href="/static/plugins/layui/css/layui.css">
    <style>
        body{
            background: grey;
            margin: 0;
        }
        .div1{
            height: 35px;
            background: white;
            color: black;
        }
        .div2{
            height: 125px;
            width: 22.7%;
            background: white;
            float: left;
            margin-top: 15px;
            margin-left: 20px;
        }
        hr{
            width: 90%;
            margin-top: 60px;
            margin-left: 15px;
        }

        .div1s1{
            margin-left: 20px;
            position: absolute;
            margin-top: 5px;
            color: red;
        }

        .div1s2{
            position: absolute;
            margin-left: 120px;
            font-size: 12px;
            margin-top: 8px;
            color: black;
        }
        .s1{
            position: absolute;
            margin-top: 15px;
            margin-left: 100px;
            font-size: 12px;
        }
        .s2{
            position: absolute;
            margin-top: 10px;
            margin-left: 115px;
            font-size:25px ;
            letter-spacing: 0.5em;

        }
        .s3{
            margin-left: 25px;
            font-size: 12px;
        }
        .div3{
            clear: left;
            margin-left: 20px;
            position: absolute;
            margin-top: 155px;
            height: 35px;
            background: white;
            color: black;
            width: 96%;
        }
        .div3 span{
            position: absolute;
            margin-top:5px ;
            margin-left: 10px;
        }
        .div4{
            width: 96%;
            height: 40px;
            margin-top: 192px;
            margin-left: 20px;
            background: white;
        }
        .div4 span{
            position: absolute;
            margin-top: 10px;
            margin-left: 10px;
        }
        .div5,.div6{
            margin-top: 2px;
            width: 549.5px;
            height: 285px;
            background: white;
            margin-left: 20px;
        }

    </style>
</head>
<body>
<div class="div1">
    <span class="div1s1">我的应用中心</span>  <span class="div1s2">/  数据中心</span>
</div>
<div class="div2"style="color: green">
    <span class="s1">今日下单用户数</span><br>
    <span class="s2">0人</span>
    <hr style="height:1px;border:none;border-top:3px solid green">
    <span class="s3">昨天0，比昨天增长（0%）</span>
</div>
<div class="div2" style="color: red">
    <span class="s1">今日销售订单数</span><br>
    <span class="s2">0单</span>
    <hr style="height:1px;border:none;border-top:3px solid red;" />
    <span class="s3">昨天0，比昨天增长（0%）</span>
</div>
<div class="div2" style="color: blue">
    <span class="s1">今日发货订单数</span><br>
    <span class="s2">0单</span>
    <hr style="height:1px;border:none;border-top:3px solid blue;" />
    <span class="s3">昨天0，比昨天增长（0%）</span>
</div>
<div class="div2" style="color: #1b6d85">
    <span class="s1">今日采购入库数量</span><br>
    <span class="s2">0个</span>
    <hr style="height:1px;border:none;border-top:3px solid #1b6d85;" />
    <span class="s3">昨天0，比昨天增长（0%）</span>
</div>
<div class="div3">
    <span>订单曲线图</span>
</div>
<div class="div4">
    <span>
    时间范围：
    <button class="layui-btn layui-btn-mini layui-btn-primary">1个月</button>
    <button class="layui-btn layui-btn-mini layui-btn-primary">3个月</button>
    <button class="layui-btn layui-btn-mini layui-btn-primary">半年</button>
    <button class="layui-btn layui-btn-mini layui-btn-primary">1年</button>
        </span>
</div>

<div class="div5" style="float: left">
</div>
<div class="div6" style="float: left">
</div>
<script src="/static/plugins/jquery.js"></script>
<script src="/static/plugins/layui/layui.js"></script>
<script type="text/javascript" src="/static/plugins/highcharts.js"></script>
<script type="text/javascript">
    $(function() {
        $('.div5')
            .highcharts(
                {
                    labels : {
                        style : {
                            color : "#ff0000"
                        },

                        items : [
                            {
                                style : {
                                    left : '50px',
                                    top : '100px'
                                }
                            },
                            {
                                style : {
                                    left : '50px',
                                    top : '200px',
                                    color : '#006cee',
                                    fontSize : '20px',
                                    fontWeight : 'bold',
                                    fontFamily : '微软雅黑'
                                }
                            } ]
                    },
                    title:{
                        text:'订单销量图',
                        margin:10

                    },
                    xAxis : {
                        categories : [ 'Jan', 'Feb', 'Mar', 'Apr',
                            'May', 'Jun', 'Jul', 'Aug', 'Sep',
                            'Oct', 'Nov', 'Dec' ]
                    },
                    credits:{
                        enabled: false // 禁用版权信息
                    },
                    yAxis:{
                        title:{
                            text:'销量'
                        },
                    },
                    series : [ {
                        name:'月份',
                        data : [ 29.9, 71.5, 106.4, 129.2, 144.0,
                            176.0, 135.6, 148.5, 216.4, 194.1,
                            95.6, 54.4 ]
                    } ]
                });


    $('.div6')
        .highcharts(
            {
                labels : {
                    style : {
                        color : "#ff0000"
                    },

                    items : [
                        {
                            style : {
                                left : '50px',
                                top : '100px'
                            }
                        },
                        {
                            style : {
                                left : '50px',
                                top : '200px',
                                color : '#006cee',
                                fontSize : '20px',
                                fontWeight : 'bold',
                                fontFamily : '微软雅黑'
                            }
                        } ]
                },
                title:{
                    text:'销售额图',
                    margin:10

                },
                xAxis : {
                    categories : [ 'Jan', 'Feb', 'Mar', 'Apr',
                        'May', 'Jun', 'Jul', 'Aug', 'Sep',
                        'Oct', 'Nov', 'Dec' ]
                },
                credits:{
                    enabled: false // 禁用版权信息
                },
                yAxis:{
                    title:{
                        text:'金额（百万）'
                    },
                },
                series : [ {
                    name:'月份',
                    data : [ 29.9, 71.5, 106.4, 129.2, 144.0,
                        176.0, 135.6, 148.5, 216.4, 194.1,
                        95.6, 54.4 ]
                } ]
            });
    });
</script>
<%--<!--<c:forEach items="${menus}" var="m">-->--%>
<%--<!-- {id:'${m.mid}',text:'${m.mname}',href:'${m.murl}'},-->--%>
<%--<!-- </c:forEach> -->--%>
</body>
</html>
